/**
 * 组件：IconButton 带图标的按钮组件
 * Author:Colin3dmax
 */
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native';
import Color from "../../core/constant/color";

class IconButton extends Component {

    static propTypes = {
        title: PropTypes.string,
        style: View.propTypes.style,
        touchStyle: View.propTypes.style,
        textStyle: Text.propTypes.style,
        iconSource: Image.propTypes.source,
        onPress: PropTypes.func,
        iconAlign: PropTypes.oneOf(['left', 'right']),
    }

    static defaultProps = {
        iconAlign: 'left',
        title: '',
    }

    constructor(props) {
        super(props)
        this.state = {}
    }

    componentDidMount() {

    }


    render() {
        const {touchStyle, style, textStyle, title, iconSource, onPress, iconAlign} = this.props
        return (
            <View style={[styles.container, style]}>
                <TouchableOpacity style={[styles.btnBodyTouch, touchStyle]} onPress={onPress}>
                    <View style={styles.btnBody}>
                        {iconSource && iconAlign == "left" && <Image style={styles.imageIcon} source={iconSource}/>}
                        <Text style={[styles.btnText, textStyle]}>{title}</Text>
                        {iconSource && iconAlign == "right" && <Image style={styles.imageIcon} source={iconSource}/>}
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: Color.BTN_BGCOLOR,
        borderRadius: 5,
        padding: 8,
        alignItems: 'stretch',
        justifyContent: 'center',

    },
    btnBodyTouch: {},
    btnBody: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    imageIcon: {
        width: 18,
        height: 18,
        resizeMode: 'contain',
        marginRight: 4,
    },
    btnText: {
        fontSize: 14,
        color: 'white',
    }
});

export default IconButton;